@use "../../variables" as *;

.spg-dropdown {
    display: flex;

    padding-top: calc(var(--ctr-editor-padding-top, var(--sjs-spacing-x05)));
    padding-right: calc(var(--ctr-editor-padding-right, var(--sjs-spacing-x05)));
    padding-bottom: calc(var(--ctr-editor-padding-bottom, var(--sjs-spacing-x05)));
    padding-left: calc(
        var(--ctr-editor-padding-left, var(--sjs-spacing-x05)) +
            var(--ctr-editor-content-margin-left, var(--sjs-spacing-x150))
    );
}

.spg-dropdown__value {
    @include ctrDefaultFont;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;

    margin-top: var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1));
    margin-right: var(--ctr-editor-content-margin-right, var(--sjs-spacing-x150));
    margin-bottom: var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1));
    margin-left: 0;
}
.spg-dropdown__filter-string-input {
    @include ctrDefaultFont;

    color: var(--ctr-editor-content-text-color, var(--sjs-layer-3-foreground-100, #000000e6));
}

.spg-dropdown-popup.sv-popup--menu-popup {
    height: 0;
}

.spg-dropdown__clean-button {
    --thm-ctr-editor-content-margin-top: var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1));
    --thm-ctr-editor-content-margin-bottom: var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1));
    margin-top: calc(-1 * var(--thm-ctr-editor-content-margin-top));
    margin-bottom: calc(-1 * var(--thm-ctr-editor-content-margin-bottom));
    use {
        fill: inherit;
    }
}

.spg-dropdown {
    .sd-dropdown-action-bar {
        margin-inline-start: var(--ctr-editor-gap, var(--sjs-spacing-x05));
        gap: var(--ctr-editor-buttons-gap, var(--sjs-spacing-x05));
    }

    .sd-editor-button-item {
        padding-top: var(--ctr-editor-button-padding-top, var(--sjs-spacing-x1));
        padding-right: var(--ctr-editor-button-padding-right, var(--sjs-spacing-x1));
        padding-bottom: var(--ctr-editor-button-padding-bottom, var(--sjs-spacing-x1));
        padding-left: var(--ctr-editor-button-padding-left, var(--sjs-spacing-x1));
        transform: none;

        &:hover,
        &:focus {
            border-radius: var(--ctr-editor-button-corner-radius, var(--sjs-corner-radius-x05));
            background: var(--ctr-editor-button-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaeaff));
            transition: background $creator-transition-duration;
        }

        &.sd-editor-button-item--pressed {
            border-radius: var(--ctr-editor-button-corner-radius, var(--sjs-corner-radius-x05));
            opacity: var(--ctr-editor-button-icon-opacity-pressed, 0.5);
            background: var(--ctr-editor-button-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaeaff));
            transition-property: opacity, background-color;
            transition-duration: $creator-transition-duration;
        }

        use {
            fill: var(--ctr-editor-button-icon-color, var(--sjs-layer-3-foreground-75, #000000bf));
        }
    }

    .sv-editor-button-item__icon {
        width: var(--ctr-editor-button-icon-width, var(--sjs-font-size-x3));
        height: var(--ctr-editor-button-icon-height, var(--sjs-font-size-x3));
    }
}

.spg-dropdown.sd-input--disabled {
    opacity: 1;

    .spg-dropdown__value {
        opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
    }
    .sd-editor-button-item {
        opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25);
        background: transparent;

        svg {
            fill: var(--ctr-editor-button-icon-color-disabled, var(--sjs-layer-3-foreground-75, #000000bf));
        }
    }
}
